<template>
    <div class="pl-20px">
        <div class="pb-12px flex items-center">
            当前状态：
            <div v-if="serverStatus === ''">加载中...</div>
            <div v-else-if="serverStatus === 'Running'">
                开启<Icon icon="ant-design:bulb-filled" color="green" :size="14"></Icon>
            </div>
            <div v-else>
                关闭<Icon icon="ant-design:bulb-filled" color="red" :size="14"></Icon>
            </div>
        </div>
        <div class="" v-if="serverStatus != ''">
            <el-button v-if="serverStatus === 'Running'" :loading="mapLoading.stop" type="primary" size="small"
                @click="saveHandle('stop')">停止</el-button>
            <el-button v-else :loading="mapLoading.start" type="primary" size="small"
                @click="saveHandle('start')">启动</el-button>
            <el-button :loading="mapLoading.restart" type="primary" size="small"
                @click="saveHandle('restart')">重启</el-button>
            <el-button :loading="mapLoading.reload" type="primary" size="small"
                @click="saveHandle('reload')">重载配置</el-button>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { ElMessage } from 'element-plus'
import { putAppManageSystemctlAPI } from '@/api/systemMonitor'

const props = defineProps({
    info: propTypes.object.def(undefined)
})


// 提交按钮loading
const loading = ref(false)
const mapLoading = reactive({
    start: false, //启动
    stop: false, //停止
    restart: false, //重启
    reload: false, //重载配置
})
//服务状态
const serverStatus = ref('')

onMounted(() => {
    getData();
})

//获取详情数据
const getData = () => {

    putData('status').then((res) => {
        //Running  Not Running
        serverStatus.value = res.data;
    }).catch(() => {
        serverStatus.value = 'Not Running';
    })
}

//设置数据
const putData = (opt) => {
    return putAppManageSystemctlAPI({ id: props.info?.id, opt })
}
//提交
const saveHandle = async (opt) => {
    mapLoading[opt] = true;
    putData(opt).then(() => {
        getData();
        ElMessage.success('操作成功')
    }).finally(() => {
        mapLoading[opt] = false;
    })
}
</script>